<template>
  <div>
    <el-dialog title="平面图" :visible.sync="dialogVisible" width="1200px" :before-close="closeDialog"
      :modal-append-to-body="false" :close-on-click-modal="false" :modal="true">

      <!-- <div class="div_dian">
        <i class="el-icon-location"></i>
        <span>在线</span>
        <i class="el-icon-location" style="color: #90a4ae"></i>
        <span>离线</span>
        <i class="el-icon-location" style="color: #f84242"></i>
        <span>告警</span>
      </div> -->

      <div class="caritem" @click.stop="hidePop">
        <div class="caritem_div">
          <div class="div_box" :style="{ transform: `scale(${scale}) `, left: `${x}px`, top: `${y}px` }"
            @wheel="handleWheel" @mousedown.stop="handleMouseDown" @mousemove="handleMouseMove"
            @mouseup="handleMouseUp">
            <img class="elImage" :src="image" ref="imgDiv" @mousedown.prevent />

            <i :style="'top:' + item.top + 'px;' + 'left:' + item.left + 'px;'" v-for="item in markVOList"
              :key="item.id" :class="[
                iconclass(item),
                'icon',
                { 'icon2': item.isAlarm == 1 },
              ]" @click.stop="clickIcon(item.id)">
              <div class="pop-up" @click.stop="clickPop">
                <div style="margin-bottom: 5px">设备编码：{{ item.imei }}</div>
                <div style="margin-bottom: 5px">
                  产品类型：{{ item.productName }}
                </div>
                <div style="margin-bottom: 5px">产品型号：{{ item.classMark }}</div>
                <div style="margin-bottom: 5px">设备状态：{{ item.online == 0 ? '离线' : '在线' }}</div>
                <div>告警状态：{{ item.isAlarm == 0 ? '正常' : '告警' }}</div>
                <!-- <div>
                  安装备注：{{ item.remark || '-' }}
                </div> -->
                <!-- <div style="margin-bottom: 5px">
                  状态：{{ item.online == 0 ? "离线" : "在线" }}
                </div>
                <div>告警状态：{{ item.isAlarm == 0 ? "正常" : "告警" }}</div> -->
              </div>
            </i>
          </div>
        </div>
      </div>

      <!-- <div class="div_fenbu">
        <div><i class="iconfont sanjiaoright"></i> 设备分布</div>
        <div>
          在线：<span>{{ online }}个</span>
        </div>
        <div>
          告警：<span>{{ alarm }}个</span>
        </div>
        <div>
          离线：<span>{{ offline }}个</span>
        </div>
      </div> -->

    </el-dialog>
  </div>
</template>

<script>
import { reqUpdateMark, reqGetMark } from "@api/api.js";
import { mapState } from "vuex";
import loadMore from "@mixin/loadMore";

export default {
  mixins: [loadMore],
  props: ["editId"],
  data() {
    return {
      dialogVisible: false,
      img: require("@assets/images/account_bg.png"),
      image: "",
      markVOList: [],
      popstr: "", //弹窗显示隐藏 // 用于存储当前显示的 pop-up 的 id
      online: 0,
      alarm: 0,
      offline: 0,

      // 放大缩小
      scale: 1, // 初始缩放比例为1
      scaleStep: 0.1, // 每次滚动缩放的步长

      // 鼠标拖动
      x: 0, // div的初始x坐标
      y: 0, // div的初始y坐标
      dragging: false, // 是否正在拖动
      startX: 0, // 鼠标按下时的x坐标
      startY: 0, // 鼠标按下时的y坐标
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  mounted() { },
  methods: {
    hidePop() {
      this.popstr = ''; // 隐藏所有 pop-up
    },
    // 鼠标拖动
    handleMouseDown(event) {
      this.dragging = true;
      this.startX = event.clientX - this.x;
      this.startY = event.clientY - this.y;
    },
    handleMouseMove(event) {
      if (!this.dragging) return;
      this.x = event.clientX - this.startX;
      this.y = event.clientY - this.startY;
    },
    handleMouseUp() {
      this.dragging = false;
    },
    // 放大缩小
    handleWheel(event) {
      event.preventDefault(); // 阻止默认事件，防止页面滚动
      const delta = event.deltaY * -1; // 获取滚轮滚动的方向
      this.scale += delta > 0 ? this.scaleStep : -this.scaleStep; // 根据滚动方向调整缩放比例
      // 限制缩放比例的范围，防止过大或过小
      this.scale = Math.min(Math.max(0.1, this.scale), 5);
    },
    //获取平面图设备标点
    async getGetMark(dialogAlarmInfo,floorId) {
      const res = await reqGetMark(1,10,{
        floorId: floorId,
        imei:dialogAlarmInfo.imei,
      });
      // console.log(res);
      this.markVOList = res.data.row.markVOList || [];
      this.online = res.data.row.deviceStatisticsVO.online || 0;
      this.alarm = res.data.row.deviceStatisticsVO.alarm || 0;
      this.offline = res.data.row.deviceStatisticsVO.offline || 0;
      if (this.markVOList.length == 0) return;
      this.markVOList = this.markVOList.filter((item) => item.mark != "");
      this.markVOList.forEach((item) => {
        item.left = item.mark.slice(0, item.mark.indexOf(","));
        item.top = item.mark.slice(item.mark.indexOf(",") + 1);
      });
    },
    //弹窗显示隐藏
    clickIcon(id) {
      if (this.popstr == id) {
        this.popstr = "";
        return;
      }
      this.popstr = id;
    },
    clickPop(event) {
      event.stopPropagation(); // 阻止 click 事件冒泡到父元素
    },
    // 标记点颜色
    // iconclass(e) {
    //   // console.log(e);
    //   if (e.isAlarm == 1) {
    //     return "hon";
    //   }
    //   if (e.online == 0) {
    //     return "lixian";
    //   }
    // },
    // 标记点图片
    iconclass(e) {
      // console.log(e);
      let pic = 'iconfont shebeiguanli2'
      if (e.productName == '门磁') {
        pic = 'iconfont menci'
      } else if (e.productName == '烟感探测报警器') {
        pic = 'iconfont yangan'
      } else if (e.productName == '红外探测器') {
        pic = 'iconfont rentihongwai'
      } else if (e.productName == '智能燃气报警器') {
        pic = 'iconfont reshuiqi'
      }
      return pic
    },
    // 平面图赋值
    getimage(image) {
      this.image = image;
    },
    // 点击关闭弹框
    closeDialog() {
      this.popstr = "";
      this.dialogVisible = false;
      // this.left = 0;
      // this.top = 0;
      this.scale = 1 // 初始缩放比例为1
      this.scaleStep = 0.1 // 每次滚动缩放的步长
      this.x = 0// div的初始x坐标
      this.y = 0 // div的初始y坐标
      this.dragging = false // 是否正在拖动
      this.startX = 0 // 鼠标按下时的x坐标
      this.startY = 0 // 鼠标按下时的y坐标
    },
  },
};
</script>

<style lang="less" scoped>
.caritem {
  width: 100%;
  height: 96%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  .caritem_div {
    width: 800px;
    height: 450px;
    position: relative;
  }
}

.div_box {
  margin: 0 auto;
  width: 800px;
  height: 450px;
  position: absolute;
  // top: 50%;
  // left: 50%;
  // transform: translate(-50%, -50%);
  cursor: move;

  .elImage {
    // cursor: pointer;
    width: 100%;
    height: 100%;
    // position: absolute;
    // top: 50%;
    // left: 50%;
    // transform: translate(-50%,-50%);
  }

  .icon {
    position: absolute;
    border-radius: 50%;
    font-size: 20px;
    width: 34px;
    height: 34px;
    background-color: #7367F0;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    .pop-up {
      position: absolute;
      // left: 10px;
      bottom: 50px;
      left: 50%;
      transform: translate(-50%, 0);
      // background-color: #7367F0;
      background: rgba(115, 103, 240, 0.9);
      width: 250px;
      padding: 8px 10px;
      border-radius: 5px;
      font-size: 14px;
      color: #fff;
      z-index: 9999;
      // display: none;
      opacity: 0;
      visibility: hidden;
      // user-select: none;
      transition: all 0.2s ease-in;
      cursor: text;

      // 向下小箭头
      &:after {
        content: "";
        border: 8px solid transparent;
        border-top-color: rgba(115, 103, 240, 0.9);
        position: absolute;
        bottom: -15px;
        left: 50%;
        transform: translate(-50%, 0);
      }
    }

    &:hover .pop-up {
      opacity: 1;
      visibility: visible;
    }
  }

  @keyframes blink {

    0%,
    100% {
      box-shadow: 0 0 10px 5px red;
    }

    50% {
      box-shadow: 0 0 10px 5px transparent;
    }
  }

  .icon2 {
    animation: blink 1s linear infinite;
  }

  .hon {
    color: #f84242;
  }

  .lixian {
    color: #90a4ae;
  }
}

.div_dian {
  display: flex;
  align-items: center;
  color: #fff;
  margin-bottom: 5px;

  i {
    font-size: 18px;
    color: #28c76f;
  }

  span {
    margin-right: 10px;
    margin-left: 3px;
    font-size: 13px;
  }
}

.div_fenbu {
  position: absolute;
  right: 100px;
  top: 30px;
  font-size: 14px;
  color: #cfd3ec;

  >div {
    margin-bottom: 20px;
  }

  span {
    color: #cfd3ec;
  }
}

// ::v-deep .el-dialog{
//     max-height: 100vh;
// }

::v-deep .el-dialog__header {
  display: block !important;
  background: #384e91;
  border-bottom: 1px solid #06b1e7;
  text-align: center;

  .el-dialog__title {
    color: #f1f1f1;
  }
}

::v-deep .el-dialog__body {
  background: #384e91 !important;
  color: #f1f1f1;
  position: relative;
}

::v-deep .el-dialog {
  height: 80% !important;
  width: 70% !important;
  //   border: 2px solid #06b1e7;
  //   box-shadow: 0px 0px 10px #06b1e7;
  // background-color: #09143f !important;
}

::v-deep .el-dialog__footer {
  border: 1px solid #2f3349;
  background: #2f3349;
}

.el_button {
  border-color: #7367f0 !important;
  background-color: #7367f0 !important;
}
</style>